<template>
    <view style="height: 100%;">
        <scroll-view style="height: 100%;" :scroll-into-view="intoIndex" scroll-y="true" scroll-with-animation
            @scroll="scroll">
            <view class="network">
                <view :id="'slot' + index" class="network-item" v-for="(item, index) in list" :key="index">
                    <view class="item-title">
                        <view class="title">
                            <view class="txt">
                                {{ item.title }}
                            </view>
                            <view class="bg"></view>
                        </view>
                        <ImgUpload v-if="item.fileList" :uploadParams="{ ...uploadParams, type_name: item.title }"
                            :title="item.title" :fileList="form[item.key].fileList"
                            @change="(val) => fileChange(val, item.key)">
                        </ImgUpload>
                    </view>
                    <view class="defaultModel">
                        <view class="d_model" v-for="(citem, cindex) in form[item.key].data" :key="cindex">
                            <view class="child">
                                <view class="child-title">
                                    <view class="title">
                                        型号
                                    </view>
                                    <image class="del" @tap="delItem(item.key, cindex)" v-if="cindex != 0"
                                        src="/static/del1.png"></image>
                                </view>

                                <view class="fileds size">
                                    <input v-model="form[item.key].data[cindex]['型号']" class="cinput size-input" type="text"
                                        placeholder="请输入型号">
                                    <view class="xxx">
                                        X
                                    </view>
                                    <input v-model="form[item.key].data[cindex]['数量']" class="cinput num" placeholder="数量"
                                        type="number">
                                </view>
                            </view>
                            <view class="child" v-if="item.title == '气体储瓶'">
                                <view class="child-title">
                                    <view class="title">
                                        气压
                                    </view>
                                </view>
                                <view class="fileds">
                                    <view class="canUse">
                                        <view class="btn" @tap="()=>form[item.key].data[cindex]['气压'] = '异常'"
                                            :class="{ active: form[item.key].data[cindex]['气压']=== '异常' }">异常
                                        </view>
                                        <view class="btn" @tap="()=>form[item.key].data[cindex]['气压'] = '正常'"
                                            :class="{ active: form[item.key].data[cindex]['气压'] === '正常' }">正常
                                        </view>
                                    </view>
                                </view>
                            </view>
                            <view class="child">
                                <view class="child-title">
                                    <view class="title">
                                        厂家
                                    </view>
                                </view>
                                <view class="fileds">
                                    <input v-model="form[item.key].data[cindex]['厂家']" class="cinput" type="text"
                                        placeholder="请输入厂家">
                                </view>
                            </view>
                            <view class="child">
                                <view class="child-title">
                                    <view class="title">
                                        生产日期
                                    </view>
                                </view>
                                <picker mode="date" :value="form[item.key].data[cindex]['生产日期']"
                                    @change="(e) => form[item.key].data[cindex]['生产日期'] = e.detail.value">
                                    <view class="fileds cdata-box">
                                        <view class="cinput"
                                            :style="{ color: form[item.key].data[cindex]['生产日期'] ? '#282828' : '#B8B8B8' }">
                                            {{ form[item.key].data[cindex]['生产日期'] ||
                                                '请选择生产日期'
                                            }}
                                        </view>
                                        <image class="cicon" src="/static/right.png"></image>
                                    </view>
                                </picker>

                            </view>
                            <view class="child">
                                <view class="child-title">
                                    <view class="title">
                                        年检到期日期
                                    </view>
                                </view>

                                <picker mode="date" :value="form[item.key].data[cindex]['年检到期日期']"
                                    @change="(e) => form[item.key].data[cindex]['年检到期日期'] = e.detail.value">
                                    <view class="fileds cdata-box">
                                        <view class="cinput"
                                            :style="{ color: form[item.key].data[cindex]['年检到期日期'] ? '#282828' : '#B8B8B8' }">
                                            {{ form[item.key].data[cindex]['年检到期日期'] ||
                                                '请选择年检到期日期'
                                            }}
                                        </view>
                                        <image class="cicon" src="/static/right.png"></image>

                                    </view>
                                </picker>

                            </view>
                        </view>
                        <view class="add-box">
                            <image class="add" @tap="addItem(item.key)" src="/static/add_incident.png"></image>
                        </view>
                    </view>
                </view>
            </view>
        </scroll-view>
    </view>
</template>

<script>
import { formatDate } from "@/utils/utils"
export default {
    props: {
        intoIndex: {
            type: String,
            default: ''
        },
        list: {
            type: Array,
            default: []
        },
        defaultValue: {
            type: Object,
            default: null
        },
        uploadParams: {
            type: Object,
            default: {}
        }
    },
    // 局部注册的组件
    components: {},

    created() {
        uni.$u.deepClone(this.selected)
    },

    watch: {

    },

    data() {
        return {

            fileList: [],
            model: {
                '型号': '',
                '数量': '',
                '厂家': '',
                '生产日期': '',
                '年检到期日期': '',
                show1: false,
                show2: false
            },
            form: {
                '主控制器': {
                    title: '主控制器',
                    needFile: true,
                    fileList: [],
                    data: [
                        {
                            '型号': '',
                            '数量': '',
                            '厂家': '',
                            '生产日期': '',
                            '年检到期日期': '',
                            show1: false,
                            show2: false
                        }
                    ]
                },
                '气体储瓶': {
                    title: '气体储瓶',
                    needFile: true,
                    fileList: [],
                    data: [
                        {
                            '型号': '',
                            '数量': '',
                            '气压': '',
                            '厂家': '',
                            '生产日期': '',
                            '年检到期日期': '',
                            show1: false,
                            show2: false
                        }
                    ]
                },
                '应急照明灯': {
                    title: '应急照明灯',
                    needFile: true,
                    fileList: [],
                    data: [
                        {
                            '型号': '',
                            '数量': '',
                            '厂家': '',
                            '生产日期': '',
                            '年检到期日期': '',
                            show1: false,
                            show2: false
                        }
                    ]
                },

                '手提灭火器': {
                    title: '手提灭火器',
                    needFile: true,
                    fileList: [],
                    data: [
                        {
                            '型号': '',
                            '数量': '',
                            '厂家': '',
                            '生产日期': '',
                            '年检到期日期': '',
                            show1: false,
                            show2: false
                        }
                    ]
                },
                '其他设置设备数量': {
                    title: '其他设置设备数量',
                    needFile: true,
                    fileList: [],
                    data: [
                        {
                            '型号': '',
                            '数量': '',
                            '厂家': '',
                            '生产日期': '',
                            '年检到期日期': '',
                            show1: false,
                            show2: false
                        }
                    ]
                },
                '六氮丙烷': {
                    title: '六氮丙烷',
                    needFile: true,
                    fileList: [],
                    data: [
                        {
                            '型号': '',
                            '数量': '',
                            '厂家': '',
                            '生产日期': '',
                            '年检到期日期': '',
                            show1: false,
                            show2: false
                        }
                    ]
                },
            }

        }
    },
    // 计算属性
    computed: {},
    // 组件方法
    methods: {
        scroll(e) {

        },
        fileChange(val, key) {
            this.form[key].fileList = val
        },
        formatDate(time) {
            if (!time) return ''
            return formatDate(new Date(time))
        },
        dataOpen(formKey, cindex, key) {
            this.form[formKey].data[cindex][key] = true
        },
        closeDate(formKey, cindex, key) {
            this.form[formKey].data[cindex][key] = false
        },
        addItem(formKey) {
            if(formKey=='气体储瓶'){
                this.form[formKey].data.push({
                '型号': '',
                '气压':'',
                '数量': '',
                '厂家': '',
                '生产日期': '',
                '年检到期日期': '',
                show1: false,
                show2: false
            })
            }else{
                this.form[formKey].data.push({
                '型号': '',
                '数量': '',
                '厂家': '',
                '生产日期': '',
                '年检到期日期': '',
                show1: false,
                show2: false
            })
            }

        },
        delItem(key, index) {
            this.form[key].data.splice(index, 1)
        },


    },
    watch: {
        form: {
            handler(val) {
                this.$emit('getForm', val)
            },
            deep: true,
            immediate: true
        },
        defaultValue: {
            handler(val) {
                this.form = val
            },
        }
    }
}
</script> 

<style scoped lang="scss" src="./assets/index.scss"></style>